<template>
  <!--付息日信息调整界面-->
  <div style="margin-right:50px;">
    <el-form
      :model="form"
      status-icon
      ref="form"
      label-width="140px"
      class="demo-ruleForm"
      style="margin-top: 50px;"
      size="mini">
      <el-row>
        <el-col :span="8">
          <!-- prop,:rules必须一起写 -->
          <el-form-item
            label="产品代码:"
            prop="prod_code"
            :rules="rules.prod_code"
          >
            <el-input v-model="form.prod_code" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <!-- prop,:rules必须一起写 -->
          <el-form-item
            label="产品名称:"
            prop="prod_name"
            :rules="rules.prod_name"
          >
            <el-input v-model="form.prod_name" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="付息频率:"
            prop="pay_freq"
            :rules="rules.pay_freq"
          >
            <el-select
              v-model="form.pay_freq"
              placeholder="--请选择--"
              filterable
              clearable
              @change="payfreqchange"
            >
              <el-option
                v-for="(value,key,index) in dict.t8_pay_newfreq"
                :key="index"
                :label="value"
                :value="key"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="首次付息日:"
            prop="first_pay_date"
            :rules="rules.first_pay_date"
          >
            <el-date-picker
              v-model="form.first_pay_date"
              type="date"
              class="venus-input-middle venus-input-date"
              placeholder="请输入起始日期"
              value-format="yyyyMMdd"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="非工作日顺延:"
            prop="nextworkday"
            :rules="rules.nextworkday"
          >
            <el-select
              v-model="form.nextworkday"
              placeholder="--请选择--"
              filterable
              clearable
            >
              <el-option
                v-for="(value,key,index) in dict.t8_next_workday"
                :key="index"
                :label="value"
                :value="key"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="收益起始日期:"
            prop="start_fee_date"
            :rules="rules.start_fee_date"
          >
            <el-date-picker
              v-model="form.start_fee_date"
              type="date"
              class="venus-input-middle venus-input-date"
              placeholder="请输入起始日期"
              value-format="yyyyMMdd"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="清盘日期:"
            prop="end_date"
            :rules="rules.end_date"
          >
            <el-date-picker
              v-model="form.end_date"
              type="date"
              class="venus-input-middle venus-input-date"
              placeholder="请输入起始日期"
              value-format="yyyyMMdd"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="8" v-show="dShow">
          <!-- prop,:rules必须一起写 -->
          <el-form-item
            label="付息间隔天数:"
            prop="paydays"
            :rules="rules.paydays"
          >
            <el-input v-model="form.paydays" />
          </el-form-item>
        </el-col>
        <el-col :span="8" v-show="tShow">
          <!-- prop,:rules必须一起写 -->
          <el-form-item
            label="自定义付息日:"
            prop="custompayday"
            :rules="rules.custompayday"
          >
            <el-input v-model="form.custompayday" placeholder="填写格式：yyyyMMdd|yyyyMMdd" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="调整日期:"
            prop="establish_date"
            :rules="rules.establish_date"
          >
            <el-date-picker
              v-model="form.establish_date"
              type="date"
              class="venus-input-middle venus-input-date"
              placeholder="请输入日期"
              value-format="yyyyMMdd"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8" v-show="fShow">
          <el-form-item
            label="调整后首次付息日:"
            prop="adjustfirstdate"
            :rules="rules.adjustfirstdate"
          >
            <el-date-picker
              v-model="form.adjustfirstdate"
              type="date"
              class="venus-input-middle venus-input-date"
              placeholder="请输入起始日期"
              value-format="yyyyMMdd"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="最后确认付息日期:"
            prop="end_affdate"
            :rules="rules.end_affdate"
          >
            <el-date-picker
              v-model="form.end_affdate"
              type="date"
              class="venus-input-middle venus-input-date"
              placeholder="请输入起始日期"
              value-format="yyyyMMdd"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="0" :sm="0" :md="0">
          <el-input v-model="form.prod_id" :disabled="true" type="hidden" />
        </el-col>
      </el-row>
      <div style="text-align:center">
        <el-button type="success" @click="domesticcurrency" >提交</el-button>
        <el-button type="info" @click="reset">重置</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
  import * as kk from '../../../../../utils/k-utils'
  import request from '../../../../../utils/request'

  export default {
    data() { // 数据定义
      return {
        /* 字典 */
        dict: {
          t8_pay_newfreq: {},
          t8_next_workday: {}
        },
        dShow: false,
        tShow: true,
        fShow: true,
        rules: {
          prod_code: [
            { required: true, message: '该项不能为空', trigger: 'blur' }
          ],
          prod_name: [
            { required: true, message: '该项不能为空', trigger: 'blur' }
          ],
          pay_freq: [
            { required: true, message: '该项不能为空', trigger: 'blur' }
          ],
          first_pay_date: [
            { required: true, message: '该项不能为空', trigger: 'blur' }
          ],
          nextworkday: [
            { required: true, message: '该项不能为空', trigger: 'blur' }
          ],
          start_fee_date: [
            { required: true, message: '该项不能为空', trigger: 'blur' }
          ],
          end_date: [
            { required: true, message: '该项不能为空', trigger: 'blur' }
          ],
          paydays: [
            { required: true, message: '该项不能为空', trigger: 'blur' }
          ],
          custompayday: [
            { required: true, message: '该项不能为空', trigger: 'blur' }
          ],
          establish_date: [
            { required: true, message: '该项不能为空', trigger: 'blur' }
          ],
          adjustfirstdate: [
            { required: true, message: '该项不能为空', trigger: 'blur' }
          ],
          end_affdate: [
            { required: true, message: '该项不能为空', trigger: 'blur' }
          ],
          prod_id: [
            { required: true, message: '该项不能为空', trigger: 'blur' }
          ],
        },
        form: {
          prod_code: '',
          prod_name: '',
          pay_freq: '',
          first_pay_date: '',
          nextworkday: '',
          start_fee_date: '',
          end_date: '',
          paydays: '',
          custompayday: '',
          establish_date: '',
          adjustfirstdate: '',
          end_affdate: '',
          prod_id: ''
        }
      }
    },
    mounted() {
      // 初始化调用
      this.init()
    },
    methods: {
      init: function() {
        kk.k_load_dict(this, 't8_pay_newfreq', 't8_pay_newfreq')
        kk.k_load_dict(this, 't8_next_workday', 't8_next_workday')
      },
      payfreqchange(v) {
        this.form.paydays = ''
        this.form.custompayday = ''
        if (v == 6) {
          this.dShow = false
          this.tShow = true
          this.fShow = false
        } else if (v == 9) {
          this.form.adjustfirstdate = ''
          this.dShow = false
          this.tShow = false
          this.fShow = false
        } else if (v == 10) {
          this.dShow = true
          this.fShow = true
          this.tShow = false
        } else {
          this.fShow = true
          this.dShow = false
          this.tShow = false
        }
      }
    }
  }
</script>
<style scoped>

</style>
